<template>
	<view class="box">
		
		<u-empty    v-if="list.length==0&status!='loadmore'"   text="当前无抢单"    icon="https://cdn.uviewui.com/uview/empty/history.png">
		</u-empty>
		<view v-else class="content2" v-for="(item, index) in list">
			<u-row customStyle="margin-bottom: 10px">
			    <u-col span="6">
			        <view class="demo-left" >
			        	预:<span style="color: red;">{{item.appointmentTime}} </span><!-- <span style="margin-left: 10px;">11km </span> -->
			        </view>
			    </u-col>
				<u-col span="3">
					<view >
						<view class="typeName">
							{{item.serveName}}
						</view>
					</view>
				</u-col> 
			    <u-col span="3">
			        <view class="demo-right" >
			        	<span>{{(item.commissionPrice/100).toFixed(2)}}元</span>
			        </view>
					<uview-ui>
						<u-divider></u-divider>
						<span></span>
					</uview-ui>
			    </u-col>
			</u-row>
			<u-steps  direction="column" dot activeColor="#ffd02b" inactiveColor="#00ac4e">
				<u-steps-item :title="'('+item.userName+')'+item.userAddress" :desc="item.address">
				</u-steps-item>
				<u-steps-item  :desc="getDistances(technicianlatitude,technicianlongitude,item.latitude,item.longitude)">
					
				</u-steps-item>
			</u-steps>  
			<view class="u-demo-block">
				<p v-if="item.level!=null">等级建议：{{item.level}}</p>
				备注：{{item.serviceRemark}}
				<!-- <u-read-more showHeight="40" :shadowStyle="shadowStyle" :toggle="true" fontSize="10px" closeText="展开备注">
					<rich-text :nodes="content"></rich-text>
				</u-read-more> -->
			</view>
			<u-row customStyle="margin-bottom: 10px">
				
				<u-col span="2">
					<view >
						<u-button icon="file-text" plain
					        type="primary" shape="circle"size="small" text="详情" @click="navigateTodetails(item.id)"
							  color="linear-gradient(to right, rgb(254, 223, 77), rgb(255, 211, 77))"
						></u-button>
					</view>
				</u-col>
				<u-col span="10">
					<view class="" style="margin-left: 10px;">
						<u-button type="primary" shape="circle"size="small" text="抢单" @click="robOrder(item)"
							 color="linear-gradient(to right, rgb(254, 223, 77), rgb(255, 211, 77))"
						></u-button>
					</view>
				</u-col>
			</u-row>
		
		</view>	
		<u-loadmore :status="status" v-if="list.length!=0"/>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';  
	import uEmpty from "@/pagesB/uview-ui/components/u-empty/u-empty";
	import uRow from "@/pagesB/uview-ui/components/u-row/u-row";
	import uCol from "@/pagesB/uview-ui/components/u-col/u-col";
	import uSteps from "@/pagesB/uview-ui/components/u-steps/u-steps";
	import uLoadmore from "@/pagesB/uview-ui/components/u-loadmore/u-loadmore";
	import uDivider from "@/pagesB/uview-ui/components/u-divider/u-divider";
	export default {
		components: {
		    uEmpty,uRow,uCol,uSteps,uLoadmore,uDivider
		},
		data() {
			return {
				status: 'loadmore',//上滑加载函数
				technicianlatitude:"",
				technicianlongitude:"",
				pageVO:{
					pageNo: 1,
					pageSize: 4,
					technicianId:"", 
					receiveStatus:1,//技师接单状态（1未接单，2拒绝，3接单）
					adminOrderType:"3",//3发布抢单类型
					//orderStatus:1,//订单状态:1未接单 、2已接单、3服务中、4已经完成、5拒绝、6取消 
					sort:"desc",//排序
				},
				list:[],
				content: `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
								苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
								无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
				shadowStyle: {
					    backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
					    paddingTop: "30px",
					    marginTop: "-30px", 
				},				
				
			}
		},
		computed:{
			//获取是否登录
			...mapState(['hasLogin','userInfo']) 
		},
		mounted() {
			//获取当前位置 需用户授权
			this.getCurrentLocal()
			this.showPage()
		},
		onShow() {
			//获取当前位置
		},
		methods: {
			//获取数据
			showPage(){
				
				this.request.getRequest(this.http.httpsLian.orderDispatchRecord,this.pageVO, true)
				.then(res => { 
					console.log(res)
					if(res.code!=0 )return ;
					if(res.data.list.length==0) {
					    this.status = 'nomore';
					    return
					}
					if(res.data.list.length<this.pageVO.pageSize) {
					    this.status = 'nomore';
					}
					if (this.pageVO.pageNo!= 1) {
						this.list = this.list.concat(res.data.list)
					} else {
						this.list=res.data.list
					} 
				}).catch(res => {
					uni.$u.toast(res)
				})
			},
			robOrder(itme){
			      if(itme.level!=null){
					  uni.showModal({
					      content: '此单建议达到【'+itme.level+'】以上是否确认抢单',
					      success: (e)=>{
					      	if(e.confirm){
					      		this.updateStatus("rob",itme) //rob:抢单
					      	}
					      }
					  });
					  return
				  }else{
					  this.updateStatus("received",itme)
				  }
			},
			updateStatus(type,itme){
				this.request.postRequest(this.http.httpsLian.orderDispatchRecordUpdateStatus+"?type="+type,{
					id:itme.id,
					technicianId:this.userInfo.id,
					//technicianName:this.userInfo.technicianName,
					orderId:itme.orderId
				}, true)
				.then(res => { 
					let iconMsg;
					if(res.code==0)iconMsg=true;
					if(res.code!=0)iconMsg=false;
					//回复默认值
					this.list=[]
					this.pageVO.pageNo=1
					this.pageVO.pageSize=4
					this.showPage(false)
					uni.showToast({
						title:iconMsg?'抢单成功':'抢单失败',
						icon:iconMsg?"success":"error",
						duration: 1500
					})
				}).catch(res => {
					uni.$u.toast("抢单异常")
				})
			},
			//上拉事件触发
			onReachBottomZ(){
				console.log('上拉事件触发');
				this.pageVO.pageNo+=1
				this.status = 'loading';
				this.showPage(true)
				this.$emit('onReachBottomZ')
			},
			// 页面下拉时触发，与 onLoad 等生命周期函数平级
			onPullDownRefreshZ() {
				console.log('页面下拉时触发');
				this.status = 'loadmore';
				//回复默认值
				this.list=[]
				this.pageVO.pageNo=1
				this.pageVO.pageSize=4
				this.showPage(true)
			    setTimeout(() => {
					// 操作完成时，必须结束下拉刷新，否则一直会有 loading 标志
					uni.stopPullDownRefresh();
				}, 1000);
			},
			//计算距离
			getDistances(la1, lo1, la2, lo2){
				
				return this.utils.getDistance(la1, lo1, la2, lo2)
			},
			mapFun(itme){
				//打开内置地图 导航唤醒手机高德地图 腾讯地图。
				uni.openLocation(
					{
						latitude: Number(itme.latitude),//纬度
						longitude:  Number(itme.longitude),//经度
						name:itme.userAddress,address:itme.address,
					}
				);
			},
			// 获取当前地理位置 授权验证
			getCurrentLocal(){
			  let that = this;
			  wx.getSetting({
			    success(res) {
			      if (res.authSetting['scope.userLocation'] == false){// 如果已拒绝授权，则打开设置页面
			        wx.openSetting({
			          success(res) {}
			        })
			      }  else { // 第一次授权，或者已授权，直接调用相关api
			        that.getMyLocation()
					 
			      }
			    }
			  })
			},
			// 获取当前地理位置
			getMyLocation(){
			    let that = this 
			    wx.getLocation({
			      type: 'gcj02',
			      success(res) {
			        console.log(res)
					that.technicianlatitude=res.latitude
					that.technicianlongitude=res.longitude
					
			      }
			    })
			},
			navigateTodetails(ids){
				/* uni.navigateTo({
				   url: "/pagesB/serviceList/details?id="+id
				}); */
				uni.navigateTo({
				   url: "/pagesB/serviceList/details?params="+encodeURIComponent(JSON.stringify({id:ids}))
				});
			},
			

		}
	}
</script>

<style lang="scss" scoped>
.box{
	//padding: 10px;
}	
.content2{
	background-color: white;
	padding: 8px ;
	//margin-top: 10px;
	margin-bottom: 10px;
	border-radius: 4px;
	.demo-right {
		text-align: right;
		span{
			color: red;
		}
	}
	.demo-left{
		color: $uni-text-color-placeholder;
	}
	.demo-left,.demo-right{
		font-size: 13px;
		
	}
	/deep/.u-text__value--main{
		font-size: 18px !important;
	}
	/deep/.u-text__value--tips{
		font-size: 14px !important;
	}

	/deep/.u-steps-item__content {
		margin-bottom: 10rpx;
		
	}
	/deep/.u-steps-item__line {
		height: 90px;
	}
	.slot-icon{
		font-size: 20upx;
	}
	/deep/.u-button{
	   
	    color: black !important;
		margin-top: 10px;
		margin-bottom: 5px;
	}
}
.typeName{
	border-radius: 2px;
	background-color: #fff6f5;
	//width:100rpx;
	font-size: 25rpx;
	padding: 7rpx;
	color:red;
	display: inline-block;
	position: relative;
	/* top:-33px;
	 left: 70px; */
}
.u-demo-block{
	font-size: 13px;
	color: $uni-text-color-placeholder;
	/deep/.u-read-more__content {
		font-size: 13px;
        color: $uni-text-color-placeholder;
	}
	/deep/.u-text__value{
		color: $Main-green-color !important;
	}
	margin-bottom: 10rpx;
	p{
		margin-bottom: 5px;
	}
}

</style>
